﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BusquedaComercios.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.BusquedaComercios" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type = "text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  
   <script type="text/javascript" src="Content/bootstrap.min.js"></script>
    <link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css" /> 

<script type ="text/javascript">
    var map; var infowindow;
    var marcadores = []; var Items = [];

    function InitializeMap() {
        var latlng = new google.maps.LatLng(-34.9, -56.15);
        var myOptions =
        {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


        $('#buscarFiltro').click(function () {
            Buscar();
            return false;
        });
        $('#reset').click(function () {
         //   Buscar();
            return false;
        });
        $('#view_mode').click(function () {
            CambiarShow();
            return false;
        });
        $("#txtBusqueda").keypress(function () {
            filtronombre();
        });
    }
    function filtronombre() {
        // RESULTADOS DEL FILTRADO POR NOMBRE EN MODO LISTA
        if ($("#view_mode").text() == "Mapa") {
            $("#resultsList").remove();
            $("#listCanvas").append("<div id='resultsList'></div>");

            $("#map-canvas").hide();
            $("#listCanvas").show();
            $("#resultsList").show();
            var contador = 0;
            for (var i = 0; i <= items.length; i++) {
                if (items[i].ComercioNombre.toLowerCase().indexOf($("#txtBusqueda").val()) >= 0) {
                    contador++;
                    $("#resultsList").append("<hr /><div class='row-fluid item-list'><div class='span8'> " +
                           "<a>  <span class='lead'> " + items[i].ComercioNombre + "</span> </a> <br /> " +
                           "<b>Direcciòn:</b> " + items[i].ComercioDireccion + " <br /> " +
                           "<b>Tel:</b>" + items[i].ComercioTelefono + "</div></div>");
                }
                if (contador > 0) {
                    $("#result_count").text(contador + " comercio/s encontrado/s");
                }
                else {
                    $("#result_count").text("No se encontraron resultados");

                }
            }
            
        }


        // RESULTADOS DEL FILTRADO POR NOMBRE EN MODO MAPA
        if ($("#view_mode").text() == "Lista") {
            var ltlng = [];
            var nuevosmarcadores = [];
            nuevosmarcadores = marcadores;

            for (var i = 0; i < nuevosmarcadores.length; i++) {
                nuevosmarcadores[i].setMap(null); //Remuevo marker del map.
            }

            var contador = 0;
            for (i = 0; i < items.length; i++) {
                if (items[i].ComercioNombre.toLowerCase().indexOf($("#txtBusqueda").val()) >= 0) {
                    contador++;
                    ltlng.push(new google.maps.LatLng(items[i].Latitud, items[i].Longitud));
                }
            }
            if (contador > 0) {
                $("#result_count").text(contador + " comercio/s encontrado/s");
            }
            else {
                $("#result_count").text("No se encontraron resultados");

            }

           

            map.setCenter(ltlng[0]);
            for (var i = 0; i <= ltlng.length; i++) {
                marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    position: ltlng[i]
                });

                (function (i, marker) {
                    //Aca armo info de los comercios
                    google.maps.event.addListener(marker, 'click', function () {
                        if (!infowindow) {
                            infowindow = new google.maps.InfoWindow();
                        }
                        infowindow.setContent("Nombre: " + items[i].ComercioNombre + "<br/> Dirección: " + items[i].ComercioDireccion + "<br/> Tel:" + items[i].ComercioTelefono);

                        infowindow.open(map, marker);
                    });

                })(i, marker);

                nuevosmarcadores.push(marker);
            }
        }
    }
    function CambiarShow()
    {
        //intercambiar interfaz
        if ($("#view_mode").text() == "Lista") {
            Buscar();
            $("#view_mode").text("Mapa");
        } else {
            Buscar();
            $("#view_mode").text("Lista");
          }
    }
    function markicons() {
    }

    function Buscar()
    {
        var barrio = 0;
        var rubro = 0;
        var tag = "";
        rubro = $("#cmbRubros").val();
        barrio = $("#cmbBarrio").val();
        tag =  $("#tags").val();
       var param = "{'_Barrio':" + JSON.stringify(barrio) +
                   ",'_Rubro':" + JSON.stringify(rubro) +
                   ", '_Tag':" + JSON.stringify(tag) + "}";
       
        $.ajax({
            type: "POST",
            url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/BusquedaFiltros") %>',
            data: param,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                jQuery.each(data, function (index, item) {
                    items = item;
                    if (item.length > 0)
                    {
                        $("#result_count").text(item.length  +" comercio/s encontrado/s");
                    }
                    else
                    {
                        $("#result_count").text("No se encontraron resultados");

                    }


                    if ($("#view_mode").text() == "Mapa") {
                        $("#map-canvas").hide();
                        $("#resultsList").remove();
                        $("#listCanvas").append("<div id='resultsList'></div>");

                        $("#listCanvas").show();
                        $("#resultsList").show();
                        ArmarLista(item);
                    }
                    if ($("#view_mode").text() == "Lista") {
                        $("#map-canvas").show();
                        $("#listCanvas").hide();
                        $("#resultsList").hide();
                        ArmarMapa(item);
                    }
                });
            },
            error: SetTabSessionValueFailed
        });
    }

    function ArmarLista(item) {
       for (var i = 0; i <= item.length; i++) {
           $("#resultsList").append("<hr /><div class='row-fluid item-list'><div class='span8'> " +
                   "<a>  <span class='lead'> " + item[i].ComercioNombre + "</span> </a> <br /> " +
                   "<b>Direcciòn:</b> " + item[i].ComercioDireccion + " <br /> " +
                   "<b>Tel:</b>" + item[i].ComercioTelefono + "</div></div>");
        }
    }
    function ArmarMapa(item) {
        var ltlng = [];

        for (var i = 0; i < marcadores.length; i++) {
            marcadores[i].setMap(null); //Remove the marker from the map
        }
        for (i = 0; i < item.length; i++) {
            ltlng.push(new google.maps.LatLng(item[i].Latitud, item[i].Longitud));
        }
        map.setCenter(ltlng[0]);
        for (var i = 0; i <= ltlng.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                position: ltlng[i]
            });
            
            (function (i, marker) {
                //Aca armo info de los comercios
             google.maps.event.addListener(marker, 'click', function () {
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }
                    infowindow.setContent("Nombre: " + item[i].ComercioNombre + "<br/> Dirección: " + item[i].ComercioDireccion + "<br/> Tel:" + item[i].ComercioTelefono);

                    infowindow.open(map, marker);
                });

            })(i, marker);

            marcadores.push(marker);
        }

    }
    function SetTabSessionValueFailed() {
        alert('call failed');
    }
   
</script>
<style type="text/css">
html,body{
  	height:100%;
}
body{
       /* background-image: url(Imagenes/fondo.jpg);*/
    background-repeat:no-repeat;
  	padding-top:50px; /*padding for navbar*/
    width:100%;
}
#main, #main>.row {
	height:100%;
}
#main>.row {
    overflow-y:scroll;
}
#left {
	height:100%;
}
#map-canvas {
    max-width: none;
	width:65%;
    height:550px;
    position:absolute;
    right:16px;
    top:125px;
    bottom:0;
    overflow:hidden;
}
#resultsList {
    max-width: none;
	width:65%;
    height:550px;
    position:absolute;
    right:16px;
    top:125px;
    bottom:0;
    overflow:hidden;
}

.filter-box { 
  height: 15px; 
  width: 15px;  
  display: inline-block;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box; 
}

.filter-yellow { background-color: #FBF358; }
.filter-green { background-color: #00E13C; }
.filter-blue { background-color: #5781FC; }
.filter-purple { background-color: #7C54FB; }
.filter-red { background-color: #FB6353; }

canvas {-ms-touch-action: double-tap-zoom;}

hr{border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px blue;}



/* customize nav style */
.navbar-custom {
    background-color: #4b4b4b;
	font-weight:700;
    text-transform:uppercase;
    border-width:0;
}
.navbar-custom  .navbar-nav>li>a {
	color: #ddd;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a  {
	background-color: #7e7e7e;
}
.navbar-custom .dropdown-menu{
	right:0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
	border-top-color: #999;
	border-bottom-color: #999;
}

.navbar-collapse.in { /*3.0.2 bug workaround*/
    overflow-y: visible;
}

.navbar-toggle {
	outline:0;
}
    </style>
</head>
    <body onload="InitializeMap();">
     <!-- Static navbar -->
    <nav class="navbar navbar-custom navbar-fixed-top" id="nav">
      <div class="container">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
                <li ><a href="<%= Page.ResolveUrl("~/PaginaPrincipalBT.aspx") %>">Principal</a></li>
                <li><a href="<%= Page.ResolveUrl("~/BusquedaComerciosGeoreferenciado.aspx") %>">Posición</a></li>
                <li class="active"><a href="<%= Page.ResolveUrl("~/BusquedaComercios.aspx") %>">Busqueda ampliada</a></li>
                <li><a href="<%= Page.ResolveUrl("~/BusquedaComerciosCercanos.aspx") %>">Cercanos</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="<%= Page.ResolveUrl("~/Sesion.aspx") %>">Inicio Sesión</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <!-- Segundo header -->
    <div class="navbar navbar-default">
         <div class="navbar-header">
             <a class="navbar-brand">Filtrar por Nombre</a>
         </div>
        <div class="navbar-collapse collapse">
            <form class="navbar-form" >
                <div class="form-group" style="display:inline;">
                <div class="input-group">
                <input id="txtBusqueda" type="text" class="form-control" placeholder="Ingresa el nombre del comercio para filtrar el mapa/lista?" />
                <span class="input-group-addon"><span onclick="Buscar();" class="glyphicon glyphicon-search" aria-hidden="true" ></span> </span>
                </div>
                </div>
            </form>
        </div>
        </div>
<div id='listCanvas'>
<div id='resultsList'></div>
    </div>
<div id="map-canvas"></div>
<div class="container-fluid" id="main">
  <div class="row">
  	 <div class='col-md-4'>
            <div class='well'>
            <h4>
             Seleccione los filtros de búsqueda.
            </h4>
              <form id="Form1" runat="server">
                <label> Barrio: <asp:DropDownList ID="cmbBarrio" Class="form-control" runat="server" Height="30px" Width="300px">
                </asp:DropDownList> </label>
              <label> Rubro: <asp:DropDownList ID="cmbRubros" Class="form-control" runat="server"  Height="30px" Width="300px">
              </asp:DropDownList> </label>
              <br />
               <label> Tag: 
              <input class='form-control' id='tags' placeholder='Buscar un comercio por un tag' type='text' style ="width: 300px; "/>
               </label>
                     </form>
           <br />
            <a class='btn btn-primary' id='buscarFiltro' href='#'>
              <i class='glyphicon glyphicon-search'></i>
              Buscar
            </a>
            <a class='btn btn-default' id='reset' href='#'>
              <i class='glyphicon glyphicon-repeat'></i>
              Reset
            </a>
                <div class='pull-right'>
                <button class='btn btn-info' id='view_mode'>Lista<i class='icon-list icon-white'></i></button>
                </div>
          </div>
          <div class='alert alert-info' id='result_box' ><strong id='result_count'></strong></div>
    </div>
    <div class="col-xs-4"><!--map-canvas will be postioned here--></div>
    
  </div>
</div>
</body>
</html>
